<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/goods/shop_home.css">
    <script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		.mui-slider-indicator .mui-indicator{background: #e5e5e3;}
		.mui-slider-indicator .mui-active.mui-indicator{background: #fff100;}
	</style>
</head>

<body>
	
    <div id="app">

        <!--顶部-->
        <header>
            <div class="index_header">
                <div class="city">
                    <a href="index.html" class="">
                        <span class="top_address">
                            <i class="mui-icon mui-icon-back"></i>返回
                        </span>
                    </a>
                </div>
                <div class="search" onclick="mui.openWindow('search-ware.html','search-ware.html')">
                    <i class="mui-icon mui-icon-search"></i>
                    <input type="text" name="" id="" value="" disabled="disabled" placeholder="请输入关键词搜索..." />
                    <i class="mui-icon mui-icon-closeempty"></i>
                </div>
            </div>
        </header>
	
        <!--banner-->
        <div id="slider" class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a :href="'goods_detail.html?goodsid='+bannerGroup.afterItem.url">
                        <img :src="bannerGroup.afterItem.pic">
                    </a>
                </div>
                <!-- 第一张 -->
                <div class="mui-slider-item" v-for="bannerItem in bannerGroup.bannerArr">
                    <a :href="'goods_detail.html?goodsid='+bannerItem.url">
                        <img :src="bannerItem.pic">
                    </a>
                </div>
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                <div class="mui-slider-item mui-slider-item-duplicate">
                    <a :href="'goods_detail.html?goodsid='+bannerGroup.beforeItem.url">
                        <img :src="bannerGroup.beforeItem.pic">
                    </a>
                </div>
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator" :class="index==0 ? 'mui-active':''" v-for="(bannerItem,index) in bannerGroup.bannerArr"></div>
            </div>
        </div>

        <!--导航-->
        <div class="index_nav">
            <ul>
                <li v-for="navItem in navGroup" @click="go_class_page(navItem.app_link)" :data-href="navItem.app_link">
                    <img :src="navItem.img" />
                    <span v-html="navItem.name"></span>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="hr_10"></div>
        <!--活动-->
        <div class="huodong">
        	
        	
            <div class="project">
                <div class="p_title">特惠专区
                    <!--<span class="p_title_en">This welfare</span>-->
                </div>
                <div class="bottom_line">
                    <div class="line_b"></div>
                </div>
                <div class="p_body">
                    <div class="fuli_item" @click="go_page('chaojineigou.html')">
                        <img src="../images/home_36.png" alt="">
                    </div>
                    <div class="fuli_item" @click="go_page('chaozhipintuan.html')">
                        <img src="../images/pintuan3.png" alt="">
                    </div>
                </div>
            </div>

            <div class="hr_10"></div>
            
            <div class="project ">
                <div class="p_title">精品专区
                    <!--<span class="p_title_en">This fine</span>-->
                </div>
                <div class="bottom_line">
                    <div class="line_b"></div>
                </div>
                <!--<div class="p_body p_body_jp">

                    <div class="fuli_item fuli_item_jp" v-for="wareItem in hotWare_2" @click="go_detail(wareItem.goodsid)">
                        <div class="price_tag">
                            <div>{{wareItem.min_price}}</div>
                            <div>一口价</div>
                        </div>
                        <img :src="wareItem.pic" alt="">
                    </div>

                </div>-->
            </div>

            <!--商品-->
            <div class="index_shop">
                <!-- <div class="title">
                <img src="../images/index_11.png"/>
                <p>猜你喜欢</p>
                <img src="../images/index_12.png"/>
            </div> -->
                <div class="con">
                    <ul>
                        <li v-for="wareItem in hotWare" @click="go_detail(wareItem.goodsid)" style="float: left;">
                            <p class="img">
                                <img :src="wareItem.pic" />
                            </p>
                            <p class="t">{{wareItem.name}}</p>
                            <p class="t2">
                                <span class="l">￥{{wareItem.min_price}}</span>
                                <!--<span class="r">
                                    <img src="../images/ptsp/car_03.png" alt="">
                                </span>-->
                            </p>
                        </li>

                    </ul>
                </div>
                <div class="clear"></div>
            </div>
        </div>

        <!--底部菜单-->
        <style type="text/css">
            .mui-bar-tab .mui-tab-item.mui-active {
                color: #888888 !important;
            }
.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label{
                color: #888888 !important;
	
}
            .bottom_nav_active span {
                color: #1c83fc;
            }
        </style>
        <nav class="mui-bar mui-bar-tab" style="border-top: 1px solid #d6d7dc">
            <a class="mui-tab-item bottom_nav_active" id='home_tab' href="shop_home.html">
                <span class="mui-icon ">
                    <img src="../images/home_03.png" width="19px;" alt="">
                </span>
                <span class="mui-tab-label" style="color: #1c83fc;">首页</span>
            </a>
            <a class="mui-tab-item" id='class_tab' href="select_class.html">
                <span class="mui-icon">
                    <img src="../images/nav_03.png" width="19px;" alt="">
                </span>
                <span class="mui-tab-label"  style="color: #888888;">分类</span>
            </a>
            <a class="mui-tab-item" id='shop_tab' href="mingpin.html">
                <span class="mui-icon">
                    <img src="../images/nav_05.png" width="19px;" alt="">
                </span>
                <span class="mui-tab-label"  style="color: #888888;">名品商家</span>
            </a>
            <a class="mui-tab-item " id='car_tab' href="buyCar.html">
                <span class="mui-icon">
                    <img src="../images/nav_07.png" width="19px;" alt="">
                </span>
                <span class="mui-tab-label"  style="color: #888888;">购物车</span>
            </a>
            <!--<a class="mui-tab-item" id='my_tab' href="myshop.html">
                <span class="mui-icon">
                    <img src="../images/nav_09.png" width="19px;" alt="">
                </span>
                <span class="mui-tab-label">我的</span>
            </a>-->
        </nav>

    </div>
            
      
    <!--底部菜单 end-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/host.config.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        //		导航
        var address = Storage.get('address');
        var vue = new Vue({
            el: '#app',
            data: {
                jinrijingpin: [{
                    pic: '../images/fuli_03.png',
                    pice: '29.8'
                }, {
                    pic: '../images/fuli_03.png',
                    pice: '29.8'
                },
                {
                    pic: '../images/fuli_03.png',
                    pice: '29.8'
                },
                {
                    pic: '../images/fuli_03.png',
                    pice: '29.8'
                },

                ],
                goods_list: [],
                bannerGroup: {
                    bannerArr: {},
                    beforeItem: {},
                    afterItem: {},
                    count: 0
                },
                navGroup: {

                },
                hotWare: {},
                hotWare_2: {},
                wareGroup: {}
            },
            methods: {
                go_class_page: function (tid) {
                    mui.openWindow(tid);
                },
                go_page: function (page_name) {
                    //超级内购  超值拼团
                    mui.openWindow(page_name, page_name)
                },
                get_data: function (url, cb) {
                    mui.ajax(host_config.host + url, {
                        dataType: 'json', //服务器返回json格式数据
                        type: 'get', //HTTP请求类型
                        timeout: 10000, //超时时间设置为10秒；
                        success: function (res) {
                            //服务器返回响应，根据响应结果，分析是否登录成功；
                            console.log(res);
                            if (res.code == 200) {
                                cb(res)
                            }
                        },
                        error: function (xhr, type, errorThrown) {
                            //异常处理；
                            console.log(type);
                        }
                    });
                },
                go_detail: function (goodsid) {
                    console.log(goodsid);
                    // mui.toast("跳转商品详情")
                    mui.openWindow({
                        url: 'goods_detail.html?goodsid=' + goodsid,
                    })
                }
            },
            mounted: function () {
                //mui初始化
                mui.init({
                	beforeback: function() { //监听物理返回按键的方法
						console.log('触发了  返回键')　　　　　　
					 	mui.openWindow({
					 		url:'index.html',
					 		id:'idnex.html',
					 		 show:{
							      autoShow:true,//页面loaded事件发生后自动显示，默认为true
							      aniShow:"slide-in-left",//页面显示动画，默认为”slide-in-right“；
							      
							    },
					 	});
					 	return false;
					}
                });
                var localStorage = window.localStorage;
              
                // 获取轮播图
                $.get(url + 'api/banner/banlist', { bid: address.sqid, type: 1 }, function (response) {
                    var responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                        var dataArr = responseData.data;
                        vue.bannerGroup.bannerArr = dataArr;
                        vue.bannerGroup.count = dataArr.length;
                        vue.bannerGroup.beforeItem = dataArr[0];
                        vue.bannerGroup.afterItem = dataArr[dataArr.length - 1];
                    }
                });
                // 获取菜单		https://zhapp.4hl.cn/app/menus/shopMenu?bid=123
                $.get(url + 'app/menus/shopMenu', { bid: address.sqid }, function (response) {
                 
                    var responseData = JSON.parse(response);
                    console.log(responseData)
                    if (responseData.code == '1') {
                        var menus = responseData.data;
                        vue.navGroup = menus;
                    }
                });

                // 获取商品
                $.post(url + 'api/goods/goodsclassify', { bid: address.sqid, type: 1 }, function (response) {
                 
                    var responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                    	if (responseData.data == null || responseData.data == undefined || responseData.data == '') {
                    		mui.toast('暂无商品',{ duration:'long', type:'div' })
                    		return false;
                    	}else{
                    		var dataArr = responseData.data;
                       		vue.wareGroup = dataArr;
                    	}
                        
                    }
                    
                });

                // 获取商品
                $.post(url + 'api/goods/goodsclassify', { bid: address.sqid, type: 2 }, function (response) {
                	console.log(response)
                	if(window.plus){
	                    plus.nativeUI.closeWaiting();
	                }
                    var responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                    	if (responseData.data == null || responseData.data == undefined || responseData.data == '') {
                    		mui.toast('暂无商品',{ duration:'long', type:'div' })
                    		return false;
                    	}else{
                    		var dataArr = responseData.data;
                        	vue.hotWare = dataArr;
                        	vue.hotWare_2 = [dataArr[0], dataArr[1]]
                    	}
                    }
                    
                });


                var slider = mui("#slider");
                slider.slider({
                    interval: 3000
                });
                setTimeout(function() {
					console.log('开始清离后台多余页面')
					var curr = plus.webview.currentWebview();
					var wvs = plus.webview.all();
					for(var i = 0, len = wvs.length; i < len; i++) {
						//关闭其他页面
						if(wvs[i].getURL() == curr.getURL() || wvs[i].getURL().match("shop_list_class"))
							continue;
						plus.webview.close(wvs[i], 'none');
						console.log('关闭了:' + wvs[i].getURL())
					}
				}, 1000)
            }
        })




        //			mui('.index_nav').on('tap', 'a', function() {
        //				var href = this.getAttribute('href')
        //				mui.openWindow({
        //					url: href,
        //					id: "info",
        //				});
        //				//				console.log(href)
        //				//				return false;
        //			})
//      mui.plusReady(function () {
//          var originalHeight = document.documentElement.clientHeight || document.body.clientHeight; //获取原始窗口的高度
//          window.onresize = function () {
//              var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; //软键盘弹起与隐藏  都会引起窗口的高度发生变化
//              if (resizeHeight * 1 < originalHeight * 1) { //resizeHeight<originalHeight  证明窗口被挤压了
//                  plus.webview.currentWebview().setStyle({
//                      height: originalHeight
//                  });
//              }
//          }
//      });


        mui('.mui-bar-tab').on('tap', '.mui-tab-item', function () {
            localStorage.setItem("home_to_class_id", 0)
            mui.openWindow(this.href, this.href)
        })

        mui('.city').on('tap', 'a', function () {
        	mui.openWindow({
				url:this.href,
				id:this.href,
				creatNew:true,
			})
            //viveclose()
        })

    </script>
</body>

</html>